<%--
  Created by IntelliJ IDEA.
  User: CrowHawk
  Date: 17/10/22
  Time: 下午10:21
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.common.min.js"></script>
    <!-- 引入主题 -->
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="divMain" style="width: 800px;height:400px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('divMain'),'infographic');
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '电影年度统计(可点击缩放)'
        },
        tooltip: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [
            {
                name: '电影统计数量',
                type: 'bar',
                stack: 'one',
                data: []
            }
        ]
    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var releaseDate = [];    //类别数组（实际用来盛放X轴坐标值）
 	var counts = [];    //电影统计数量数组（实际用来盛放Y坐标值）
 	var yMax = 2500;
 	var dataShadow = [];
 	

    $.ajax({
        type: "get",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "/dataAnalysis/movie/selectMovieAnnee",    //请求发送到TestServlet处
        data: {},
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                for (var i = 0; i < result.length; i++) {
                	releaseDate.push(result[i].releaseDate);    //挨个取出类别并填入类别数组
                	 dataShadow.push(yMax);
                }
                for (var i = 0; i < result.length; i++) {
                	counts.push(result[i].counts);    //挨个取出销量并填入销量数组
                }
      			myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                	 xAxis: {
                	        data: releaseDate
                	    },
                	    yAxis: {
                	        axisLine: {
                	            show: false
                	        },
                	        axisTick: {
                	            show: false
                	        },
                	        axisLabel: {
                	            textStyle: {
                	                color: '#999'
                	            }
                	        }
                	    },
                	    dataZoom: [
                	        {
                	            type: 'inside'
                	        }
                	    ],
                	    series: [
                	        { // For shadow
                	            type: 'bar',
                	            itemStyle: {
                	                normal: {color: 'rgba(0,0,0,0.05)'}
                	            },
                	            barGap:'-100%',
                	            barCategoryGap:'40%',
                	            data: counts,
                	            animation: false
                	        },
                	        {
                	            type: 'bar',
                	            itemStyle: {
                	                normal: {
                	                    color: new echarts.graphic.LinearGradient(
                	                        0, 0, 0, 1,
                	                        [
                	                            {offset: 0, color: '#83bff6'},
                	                            {offset: 0.5, color: '#188df0'},
                	                            {offset: 1, color: '#188df0'}
                	                        ]
                	                    )
                	                },
                	                emphasis: {
                	                    color: new echarts.graphic.LinearGradient(
                	                        0, 0, 0, 1,
                	                        [
                	                            {offset: 0, color: '#2378f7'},
                	                            {offset: 0.7, color: '#2378f7'},
                	                            {offset: 1, color: '#83bff6'}
                	                        ]
                	                    )
                	                }
                	            },
                	            data: counts
                	        }]
                });
             // Enable data zoom when user click bar.
                var zoomSize = 6;
                myChart.on('click', function (params) {
                    myChart.dispatchAction({
                        type: 'dataZoom',
                        startValue: releaseDate[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue: releaseDate[Math.min(params.dataIndex + zoomSize / 2, counts.length - 1)]
                    });
                });
            }

        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>